<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="maqettadocs.css" />
<title>Tutorial 12 - Desktop Apps and States (2)</title>
</head>
<body class="maqettadocs">

<div id="pagebody">

<table class="breadcrumbs noprint"><tr>
	<td> &nbsp; </td>
    <td class="prevnext">
	<a href="tutorials/App_States_Part_1.html">Previous</a> / <a href="tutorials/Mobile_Sketching.html">Next</a>
    </td></tr>
</table>

<h1>Tutorial 12 - Desktop Apps and States (2)</h1>

<div class='note'>
	When going through Maqetta's tutorials, it is suggested that you have two side-by-side
	browser windows open, one showing the tutorial, and the other where you run the application
	and perform the steps listed in the tutorial.<br/>
	<img src='img/SideBySideTutorialsApp.png' class='side_by_side'/>
</div>

<p class="comment">In the previous tutorial we created the content for each of the three "states" for our Task Manager.<br />
In this tutorial we will add interactivity by defining the states, and then wiring the states to onclick events.</p>
<!--
<ul>
<li><a href="#outline">Understanding the Outline palette</a></li>
<li><a href="#define">Define two new application states: "Add Task" and "Task Added"</a></li>
<li><a href="#visible">Use the States and Outline palettes to define which elements should be visible</a></li>
<li><a href="#wire">Wire up onclick event handlers to switch states</a></li>
<li><a href="#preview">Preview in Browser</a></li>
<li><a href="#advanced">Advanced functionality</a></li>
<li><a href="#future">Future directions</a></li>
</ul>
-->
<a name="outline"><h2>Working with the Outline palette</h2></a>

<p>The Outline palette is in the top left of the Maqetta Page Editor.</p>
<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Collapse the Outline palette entries so you see only the two top-level entries: <b>TabContainer</b> and <b>ContentPane</b>.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the <b>eye icon</b> to the left of the Content Pane.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	<i>Observe that the </i><b>Add new task</b><i> ContentPane disappears from the editing canvas and the eye is now closed.</i></li>
<div class="image">
<a href="img/outline1.png" target="_blank"><img alt="image" src="img/outline1.png" style="margin: 1em 1em 0pt 0pt;" width="200" /></a>
<div>Click on the image to enlarge it.</div>
</div><br />

<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the <b>plus icon</b> to expand the Tab Container.</li> 
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Collapse the entries so you see just the three Content Pane entries under Tab Container (one for each tab in the TabContainer).</li>
<div class="image">
<a href="img/outline2.png" target="_blank"><img alt="image" src="img/outline2.png" style="margin: 1em 1em 0pt 0pt;" width="200" /></a>
<div>Click on the image to enlarge it.</div>
</div><br />
	
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Expand the first ContentPane, then click on the first <b>&lt;div&gt;</b> to select it.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	<i>Observe how the associated the &lt;div&gt; containing the </i><b>New</b><i> and </i><b>Del</b><i> buttons is selected on the editing canvas.</i></li>
<div class="image">
<a href="img/outline4.png" target="_blank"><img alt="image" src="img/outline4.png" style="margin: 1em 1em 0pt 0pt;" width="450" /></a>
<div>Click on the image to enlarge it.</div>
</div><br />

<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click the second <b>&lt;div&gt;</b> in the Outline palette to select it.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	<i>Observe how the associated the &lt;div&gt; containing the </i><b>Sort-by:</b><i> label and </i><b>Name</b><i> ComboBox is selected on the editing canvas.</i></li>
<div class="image">
<a href="img/outline5.png" target="_blank"><img alt="image" src="img/outline5.png" style="margin: 1em 1em 0pt 0pt;" width="450" /></a>
<div>Click on the image to enlarge it.</div>
</div><br />
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Collapse the parent TabContainer entry.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Un-hide the last ContentPane by clicking on the <b>closed eye icon</b>.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the ContentPane entry in the Outline palette to select that widget.</li>
<div class="image">
<a href="img/outline6.png" target="_blank"><img alt="image" src="img/outline6.png" style="margin: 1em 1em 0pt 0pt;" width="450" /></a>
<div>Click on the image to enlarge it.</div>
</div><br />

</ol>

<a name="define"><h2>Define The Application States</h2></a>
<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the <b>Scenes palette</b> tab (located at the lower right of page editor).</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the <b>plus icon</b> to bring up the <b>Create New State</b> dialog.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Enter "<b>Add Task</b>" and click <b>Create</b>.</li>
	<div><img src="img/new_state.png" width="230" /></div>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the <b>plus icon</b> again to bring up the <b>Create New State</b> dialog.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Enter "<b>Task Added</b>" and click <b>Create</b>.
	<br /><br />You should now have three states:</li>
	<div><img src="img/states_palette.png" /></div>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the <strong>Save</strong> button on the toolbar to save your changes.</li>
</ol>

<a name="visible"><h2>Configure Widget Visibility For Each State</h2></a>
<h3>Configure the Background State</h3>
<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the Scenes palette, click on <b>Background</b> to put your application into the Background state.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the Outline palette, close the <b>eye icon</b> for the ContentPane for the Add Task dialog.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	<i>The </i><b>Add new task</b><i> dialog should now be invisible.</i></li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the Outline palette, close the <b>eye icon</b> for the MultiSelect widget.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	<i>The MultiSelect widget should now be invisible.</i></li>
<div><img src="img/states_palette.png" width='200'/></div>
<div class="image">
<a href="img/normal_state.png" target="_blank"><img alt="image" src="img/normal_state.png" style="margin: 1em 1em 0pt 0pt;" width="200" /></a>
<div>Click on the image to enlarge it.</div>
</div>
</ol>

<h3>Configure the "Add Task" State</h3>
<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the Scenes palette, click on <b>Add Task</b> to put your application into the "Add Task" state.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the Outline palette, open the <b>eye icon</b> for the ContentPane for the <b>Add new task</b> dialog.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	<i>The </i><b>Add new task</b><i> dialog should now be visible.</i></li>
</ol>

<h3>Configure the "Task Added" State</h3>
<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the Scenes palette, click on "Task Added" to put your application into the "Task Added" state.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the Outline palette, under the TabContainer open the <b>eye icon</b> for the <b>MultiSelect</b> widget.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	<i>The MultiSelect widget should now be visible.</i></li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the <b>Save</b> button on the toolbar to save your changes.</li>
</ol>

<h3>Test the State Configurations</h3>
<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the Scenes palette, alternatively click on <b>Background</b>, <b>Add Task</b> and <b>Task Added</b>.
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	<i>Observe how things appear and disappear as you changes states.</i></li>
</ol>

<a name="wire"><h2>Wire up onclick event handlers to switch states</h2></a>
<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the Scenes palette, click on <b>Background</b> to put your application into the Background state.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the TabContainer, click on the <b>New</b> button to select it.
	<br /><img src="img/new_button_selected.png" height="70px" /></li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the Properties palette, open the <b>Events</b> section.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the drop-down for the <b>onclick</b> event select <b>State:Add Task</b>.<br />
(<i>Note that this is one of the events that we added in the Scenes palette.</i>)
	<br /><img src="img/onclick.png" height="60px" /></li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the Scenes palette, click on <b>Add Task</b> to put your application into the Add Task state. This will make the "Add Task" dialog visible.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the <b>Add New Task</b> ContentPane, click on the <b>Add</b> button to select it.
	<br /><img src="img/add_button_selected.png" height="65px" /></li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the Properties palette <b>Events</b> section, set <b>onclick</b> to <b>State:Task Added</b>.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the <strong>Save</strong> button on the toolbar to save your changes.</li>
</ol>

<a name="preview"><h2>Preview in Browser</h2></a>
<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	In the toolbar, click the <b>Preview in Browser</b> icon <img class="inline" src="img/preview-browser.png" />. This will launch a new browser window that contains the HTML page you just created.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the <img class="inline" src="img/new_button.jpg" height="18px" /> button. The Add Task dialog should appear.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Enter "<b>Task 1</b>" and click the <img class="inline" src="img/add_button.jpg" height="21px" /> button.</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	The Multi Select widget should appear with "<b>Task 1</b>" in the list.
	<br /><br /><img src="img/browser1.png" height="220px"/><img src="img/browser2.png" height="220px" /><img src="img/browser3.png" height="220px" /></li>
</ol>

<a name="saveas"><h2>Save as TutorialDesktop.html</h2></a>
<ol>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	On the page editor toolbar, click on the arrow next to the <strong>Save</strong> button 
	to bring up the Save menu, and click on "Save As".
	Then save your composition as "TutorialDesktop.html".
	(We might use this file in subsequently in the Review/Commenting tutorial.)</li>
<li class='tutorial_step_div'><span class='tutorial_checkmark'>&#8658;</span>
	Click on the file tab's close button -
	<img src='img/close_sel.gif' class='exact_size_inline_icon'/>
	- to close the page editor.
</li>
</ol>
<p></p>
<p>This completes the tutorial.</p>


<a name="advanced"><h2>Advanced functionality</h2></a>

<h3>Different widget properties for different states</h3>

<p>The exercise above illustrates how to make widgets visible or invisible as the application moves from one state to another. 
Maqetta also allows widget property values to have different values for different application states. 
For example, in one state a widget might have a blue background, red text, and a width of 300px, 
but in another state that same widget might have a green background, yellow text and a width of 200px.</p>

<p>To change the values of CSS properties such as size, position or color for a particular state, follow these steps:</p>
<ul>
<li>Set widget properties for the "Background" state.</li>
<li>In the Scenes palette, create whatever states you need.</li>
<li>For each widget that needs different CSS properties for states other than normal:
<ul>
<li>In the Scenes palette, switch to the appropriate state.</li>
<li>On the canvas or in the Outline palette, click on the appropriate widget to select it.</li>
<li>In the Properties palette, go to the appropriate property and click on the "&gt;" arrow to the right of the widget to 
show the CSS Details for that widget.</li>
<li>In the CSS Details section, scroll down to the bottom and turn on the checkbox that says "Apply only to current state".</li>
<li>Scroll back to the top of the CSS Details section and assign a new value for the given CSS property.</li>
</ul>
</li>
<li>You can also tell Maqetta that move and resize changes should only apply
	to the current state (assuming the current state is different than Background) by holding down the <code>s</code>
	key while performing the operation. Note that the <code>s</code> key must be down at the
	completion of the move or resize operation (i.e., when you lift up on the mouse); otherwise,
	the move and resize command will apply to the Background state.</li>
</ul>
<br /><br />

<p class="prevnext"><a href="tutorials/App_States_Part_1.html">Previous</a> / <a href="tutorials/Mobile_Sketching.html">Next</a></p>

</div> <!-- pagebody -->

</body>
</html>